import React from 'react';
import styled from 'styled-components';
import { CallButton } from './CallButton';
import img from '../images/hero-image.jpg';


const HeroContainer = styled.div`
  background-image: url(${img});
  background-position: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;
  display: flex;
  height: 40rem;
`;

const MainTitle = styled.h1`
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 48px;
  color: #fff;
  margin: auto 0;
`;

export const Hero = () => {
  return (
    <HeroContainer>
      <MainTitle>[-DARKWAVES CONFERENCE-]</MainTitle>
      
      <CallButton url="http://www.darkwaves.zone/" label="1NSCR3V4-5E" center/>
    </HeroContainer>
  );
}